<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录123456789 17:25</title>


</head>
<body>
    <h1>用户登录</h1>
    <form id="form-login" action="login" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username">
                    <span style="coloer: red" id="span-username"></span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" name="password">
                    <span style="coloer: red" id="span-password"></span>
                </td>
            </tr>
            <tr>
                <td colspapn="2"></td>
                <td><input type="button" onclick="login()" value="登录"></td>
            </tr>
            </tr>
        </table>
    </form>
    <script  type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        function login() {
            $("#span-username").empty();
            $("#span-password").empty();

            //发送ajax请求 局部刷新
            $.ajax({
                "url": "login",
                "data": $("#form-login").serialize(),
                "type": "post",
                "dataType": "json",
                "success": function (json) {
                    if(json.state == 1) {
                        alert("登陆成功");
                    } else if(json.state == 2){
                        $("#span-username").text("用户名不存在");
                        }
                    else {
                        $("#span-password").text("密码错误");
                        }
                    }
            })
        }

    </script>
</body>
</html>